<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            height: 100px;
            width: 100px;
            background-color: red;
        }
    </style>
</head>

<body>
    <div>
        <span></span>

        <!-- disabled = true  false-->
        <button onclick="skipFn()" disabled>跳过</button>
    </div>
    <script>
        //倒计时20秒--隐藏div
        /*
           1- 每隔1秒修改 
            span里面的内容
             初始值20.在初始值基础上减1
        */
        // 初始值20
        var num = 15;
        // 一开始把初始值显示到span中
        var span = document.querySelector('span');
        span.innerHTML = num

        //保存定时器的返回值
        var timer = setInterval(function () {
            console.log(1);
            // span里面的内容
            // 在初始值基础上减1
            num--;
            // 修改span的内容
            span.innerHTML = num;
            //判断--num==0 结束
            if (num == -1) {
                // 清除定时器
                clearInterval(timer)
                // 隐藏 div
                var div = document.querySelector("div");
                //隐藏div--设置行内样式
                div.style.display = 'none'
            }

            //10秒的时候，把disabled设置为false
            if (num == 10) {
                var btn = document.querySelector('button');
                btn.disabled = false;
            }
        }, 1000)


        // 2- 跳过
        // 直接跳过按钮添加点击事件--点击的时候，让div隐藏--清除定时器
        function skipFn() {
            clearInterval(timer)
            // 隐藏 div
            var div = document.querySelector("div");
            //隐藏div--设置行内样式
            div.style.display = 'none'
        }

    </script>

</body>

</html>